<template>
	<view class="">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2" @click="goBack"><text class="colorfff iconfont icon-31fanhui1 font30"></text></view>
				<text>{{title}}</text>
			</view>
			<swiper class="swiper mt-1" circular autoplay vertical :interval="3000" :duration="500" disable-touch style="height: 90rpx;">
				<swiper-item class="swiper-item" v-for="i in SwiperList" :key="i.id">
					<view class="d-flex d-flex-middle d-flex-between rounded50 py-2" style="width: 60%; margin: 0 auto; background: rgba(0, 0, 0, .2);">
						<image :src="i.LuckyWinners" class="rounded ml-2" style="width: 50rpx; height: 50rpx;"></image>
						<view class="colorfff font22 mx-2" style="flex: 1; display: inline-block;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">尾号{{i.phone}}，抽中{{i.rewordName}}</view>
						<view class="font22 mr-2" style="display: inline-block; color: #ef5172;">{{i.time}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="position-fixed top-0 left-0 right-0 bottom-0" style="background: rgba(0, 0, 0, .5); z-index: 1000;" v-if="showWinAword">
			<view class="winAnAward">
				<view class="position-absolute font28 text-center font-bold w-100" style="color: #f05260; top: 330rpx;">恭喜你获得{{AwardData.rewardName}}</view>
				<view class="position-absolute" style="top: 375rpx; left: 50%; transform: translateX(-50%);">
					<image :src="AwardData.rewardIcon" style="width: 160rpx; height: 160rpx;"></image>
				</view>
				<view class="position-absolute d-flex d-flex-center font-bold d-flex-bottom w-100" style="top: 535rpx;">
					<view class="font22">再试一次,有</view>
					<view class="font32 mx-1" style="color: #f05260;">82%</view>
					<view class="font22">概率中大奖哦</view>
				</view>
				<view class="position-absolute d-flex d-flex-center d-flex-bottom w-100" style="top: 600rpx;">
					<view @click="DrawAgain" class="font-bold px-8" style="color: #fffed9; font-size: 46rpx; height: 90rpx; line-height: 90rpx;">再试一次</view>
				</view>
				<view class="position-absolute" style="bottom: 40rpx; left: 50%; transform: translateX(-50%);">
					<view class="d-flex-btn rounded bg-fff" style="width: 60rpx; height: 60rpx;" @click="closeWinAword">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-b.png" style="width: 50rpx; height: 50rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<gb-choujiang ref="choujiang" :nImg='nImg' :AwardList="AwardList" :sjNum="sjNum" :times="times" :RealDesc="RealDesc" :resourceId="resourceId" @updateMoney="updateMoney"></gb-choujiang>
	</view>
</template>

<script>
	import { FirstChangeApi } from "../../http/firstChange";
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				title: '幸运抽奖',
				// 背景图，可网络地址，可本地
				nImg:'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0217150758.png',
				// 中奖的索引，也就是AwardList数组的索引，sjNum不能等于4，4是立即抽奖
				sjNum: 0,
				// false前端，true前端
				isQd: true,
				// 可自己后端获取，也可以后端  percentage为概率 10代表10%   100代表100%   注意：必须要有一个概率为100%，
				resourceId: null,
				times: 0,
				showWinAword: false,
				assetsId: null,
				AwardData: {},
				RealDesc: null,
				SwiperList:[{
						LuckyWinners: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.9P6geAr4jjrqBtx6Nkjo3wAAAA?w=173&h=180&c=7&r=0&o=5&pid=1.7',
						phone: '5287',
						rewordName: '小风车',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.BBSXQfHv0uIe9TCzvm5nuQAAAA?w=158&h=180&c=7&r=0&o=5&pid=1.7',
						phone: '9045',
						rewordName: '小风车',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?w=214&h=214&c=7&r=0&o=5&pid=1.7',
						phone: '5268',
						rewordName: '明日之星',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.XjLiLaHITABy41W12FlZcgAAAA?w=191&h=191&c=7&r=0&o=5&pid=1.7',
						phone: '2563',
						rewordName: '一个月SVIP',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.C9m_-A1HAzIyflACil4c9gAAAA?w=163&h=180&c=7&r=0&o=5&pid=1.7',
						phone: '2261',
						rewordName: '棒棒蛋糕',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.nKetvjjSggVKwC55M-AzUwAAAA?w=205&h=205&c=7&r=0&o=5&pid=1.7',
						phone: '5419',
						rewordName: '冰玫瑰',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.TfW3mE-svzOm9vEroxPXYgAAAA?w=205&h=205&c=7&r=0&o=5&pid=1.7',
						phone: '3391',
						rewordName: '1000嗒币消费券',
						time: '刚刚'
					},{
						LuckyWinners: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.8qcdgsl7fwmMqc0GsPk9tQAAAA?w=206&h=205&c=7&r=0&o=5&pid=1.7',
						phone: '2049',
						rewordName: '1999嗒币',
						time: '刚刚'
					}
				],
				AwardList: [{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151338-67e04dd3-1e63-4c22-8cb1-e70f79425c11.png',
						name: '小风车',
						percentage:30,
						index_num:0
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151615-f6311967-94d7-499d-b17a-6eb18525ee81.png',
						name: '明日之星',
						percentage:20,
						index_num:1
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218141435.png',
						name: '1个月VIP',
						percentage:100,
						index_num:2
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218150043.png',
						name: '1个月SVIP',
						percentage:30,
						index_num:3
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BC%80%E5%A7%8B%E6%8A%BD%E5%A5%96.png',
						name: '',
						percentage:-1, 
						index_num:4
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029150653-78516a42-0fab-4f9e-96fa-52db1495155a.png',
						name: '棒棒蛋糕',
						percentage: 20,
						index_num:5
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151940-cc749d47-fde2-4c82-ba24-e660e71fbbfd.png',
						name: '冰玫瑰',
						percentage: 20,
						index_num:6
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png',
						name: '1999嗒币',
						percentage: 20,
						index_num:7
					},
					{
						image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219161950.png',
						name: '1000嗒币消费优惠券',
						percentage: 20,
						index_num:8
					}
				]
			}
		},
		onLoad() {
			this.getData()
			this.AssetInquiry()
		
			uni.$on('BeginDraw', () => {
				console.log('开始抽奖了');
				this.PrizeDraw()
		    });
		},
		onUnload() {  
		    // 移除监听事件  
		    uni.$off('BeginDraw');  
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			// 在抽一次
			DrawAgain() {
				this.showWinAword = false
				this.$refs.choujiang.begin(4)
			},
			// 关闭中奖弹窗
			closeWinAword() {
				this.showWinAword = false
			},
			// 中奖后的逻辑
			updateMoney(money) {
				// 中奖后获取最新状态
				this.showWinAword = true
				this.getData()
			},
			// 获取本次中奖的
			getData(){
				// 更新抽奖次数
				this.times--
				// 概率指定，如果是前端控制，如果后端控制下面步骤判断步骤可以省略  直接后端获取sjNum值即可
				if(this.isQd){
					// ------------------------------这里写获取后端中奖索引
					// 后端赋值
					this.sjNum = this.sjNum || 0
				}else{
					// 概率控制  概率100%
					let sj = Math.round(Math.random() * 99 + 1)
					// 前端控制概率
					let arr = []
					for (let i = 0; i < this.AwardList.length; i++) {
						if(this.AwardList[i].percentage>=sj){
							arr.push(this.AwardList[i])
						}
					}
					// 随机获得索引
					if(arr.length>1){
						this.sjNum = arr[Math.round(Math.random() * arr.length)].index_num
					}else{
						this.sjNum = arr[0].index_num
					}
				}
			},
			// 获取抽奖奖励列表
			async GetListOfLotteryRewards() {
				let params = {
					drawPrizeActivityId: this.resourceId
				}
				let res = await FirstChangeApi.ListOfLotteryRewards(params)
				res.drawPrizeRewardVo.rewardList.forEach((i, dex) => {
					if(dex<4) {
						this.AwardList[dex].image = i.rewardIcon
						this.AwardList[dex].name = i.rewardName
						this.AwardList[dex].rewardResourceId = i.rewardResourceId
						this.AwardList[dex].rewardType = i.rewardType
					}
					if(dex>=4 && dex<9) {
						this.AwardList[dex+1].image = i.rewardIcon
						this.AwardList[dex+1].name = i.rewardName
						this.AwardList[dex+1].rewardResourceId = i.rewardResourceId
						this.AwardList[dex+1].rewardType = i.rewardType
					}
				})
				this.AwardList.forEach((i, dex) => {
					if(i.rewardType === 3) {
						i.image = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png'
					}
					if(i.rewardType === 6) {
						i.image = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218141435.png'
					}
					if(i.rewardType === 7) {
						i.image = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20250218150043.png'
					}
					if(i.rewardType === 9) {
						i.image = 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219161950.png'
					}
				})
				this.RealDesc = res.description
			},
			// 资产查询
			async AssetInquiry() {
				let params = {
					resourceType: 4
				}
				let res = await FirstChangeApi.AssetInquiry(params)
				if(res.records && res.records.length!=0) {
					this.resourceId = res.records[0].resourceId
					this.times = res.records[0].count
					this.assetsId = res.records[0].id
					this.GetListOfLotteryRewards()
				} else {
					this.times = 0
				}
			},
			// 开始抽奖后调用接口
			async PrizeDraw() {
				let params = {
					assetsId: this.assetsId
				}
				let res = await FirstChangeApi.PrizeDraw(params)
				this.AwardList.forEach((i, dex) => {
					if(i.rewardResourceId === res.rewardList[0].rewardResourceId) {
						this.sjNum = dex
						this.AwardData.rewardName = i.name
						this.AwardData.rewardIcon = i.image
						this.AwardData.rewardType = i.rewardType
					}
				})
			}
		}
	}
</script>

<style>
.content {
	width: 100%;
}
.content .title {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding-right: 47rpx;
	color: #fff;
}
.content .title text {
	flex: 1;
	font-size: 32rpx;
	text-align: center;
	font-weight: normal;
}
.z-index-99 {
	z-index: 99;
}
.winAnAward {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 550rpx;
	height: 880rpx;
	background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219163411.png);
	background-size: 100% 100%;
}
</style>